<template>
    <div class="app-container">

        <el-form
            :inline="true"
            ref="queryParamsRef"
            :model="queryParams"
            label-width="auto"
            label-position="left"
        >
            <el-row>
                <el-col style="flex: 1 1 0;">
                    <el-row :gutter="16">
                        <el-col :span="8">
                            <el-form-item label="派警类型：" prop="sendPoliceType" style="width: 100%;">
                                <el-select
                                    v-model="queryParams.sendPoliceType"
                                    placeholder="选择派警类型"
                                    clearable
                                    @change="getTableData"
                                >
                                    <el-option
                                        v-for="item in nj_sendpolice_type"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="派警日期起止：" style="width: 100%;">
                                <el-date-picker
                                    v-model="sendPoliceTime"
                                    type="daterange"
                                    unlink-panels
                                    range-separator="-"
                                    start-placeholder="开始时间"
                                    end-placeholder="截止时间"
                                    value-format="YYYY-MM-DD"
                                    @change="changeSendPoliceTimerHandle"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="执勤时间起止：" style="width: 100%;">
                                <el-date-picker
                                    v-model="searchTime"
                                    type="daterange"
                                    unlink-panels
                                    range-separator="-"
                                    start-placeholder="开始时间"
                                    end-placeholder="截止时间"
                                    value-format="YYYY-MM-DD"
                                    @change="changeDateTimerHandle"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="执勤情况：" prop="actDetail" style="width: 100%;">
                                <el-input v-model="queryParams.actDetail"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="状态：" prop="state" style="width: 100%;">
                                <el-select
                                    v-model="queryParams.state"
                                    placeholder="选择状态"
                                    clearable
                                    @change="getTableData"
                                >
                                    <el-option
                                        v-for="item in nj_sendpolice_status"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-col>
                <el-divider direction="vertical" style="height: 135px"/>
                <el-col style="flex: 0 0 86px;">
                    <el-form-item>
                        <el-button type="primary" @click="getTableData">
                            <el-icon class="me-1">
                                <Search/>
                            </el-icon>
                            查询
                        </el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="resetQueryParamsHandle(queryParamsRef)">
                            <el-icon class="me-1">
                                <Refresh/>
                            </el-icon>
                            重置
                        </el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="warning" @click="exportHandleXlsx('我的执勤统计列表')">
                            <el-icon class="me-1">
                                <Download/>
                            </el-icon>
                            导出
                        </el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <el-table
            ref="tableDataRef"
            :data="tableData"
            v-loading="loading"
            @sort-change="handleSortChange"
            :default-sort="defaultSort"
            border
            stripe
            :row-style="tableRowStyle"
        >
            <el-table-column type="index" width="50"/>
            <el-table-column prop="sendPoliceTypeName" label="派警类型" sortable="sendPoliceTypeName"
                             :sort-orders="sortOrders"/>
            <el-table-column prop="userName" label="派警人" sortable="userName" :sort-orders="sortOrders"/>
            <el-table-column prop="sendDate" label="派警日期" sortable="sendDate" :sort-orders="sortOrders"/>
            <el-table-column prop="actDate" label="执勤开始时间" sortable="actDate" :sort-orders="sortOrders"/>
            <el-table-column prop="endDate" label="执勤结束时间" sortable="endDate" :sort-orders="sortOrders"/>
            <el-table-column prop="actdetail" label="实施情况"/>
            <el-table-column prop="backreason" label="退回原因"/>
            <el-table-column prop="stateText" label="派警状态" sortable="stateText" :sort-orders="sortOrders"/>
            <!--            <el-table-column label="操作">-->
            <!--                <template #default="scope">-->
            <!--                    <el-button link type="primary" size="small">详情</el-button>-->
            <!--                </template>-->
            <!--            </el-table-column>-->
        </el-table>

        <pagination
            v-show="total > 0"
            v-model:page="paging.pageNum"
            v-model:limit="paging.pageSize"
            :total="total"
            @pagination="getTableData"
        />
    </div>
</template>

<script setup>
import {getCurrentInstance, useTemplateRef} from 'vue';
import {getMyWorkList} from '@/api/StatisticAnalysis/MyWork.js';
import {exportHandleXlsx} from '@/utils/export.js';
import {Download} from '@element-plus/icons-vue';
import PageEnum from '@/enum/PageEnum.js';

const {proxy} = getCurrentInstance();
const {
    nj_sendpolice_type,
    nj_sendpolice_status
} = proxy.useDict('nj_sendpolice_type', 'nj_sendpolice_status')


const queryParamsRef = useTemplateRef('queryParamsRef');
const tableDataRef = useTemplateRef('tableDataRef')

const sendPoliceTime = ref([])
const searchTime = ref([]);
const queryParams = ref({
    // 派警类型
    sendPoliceType: '',
    // 执勤情况
    actDetail: '',
    // 状态
    state: '',
    params: {
        beginTime: '',
        endTime: '',
        sendPoliceBeginTime: '',
        sendPoliceEndTime: ''
    }
});


const loading = ref(false)
const tableData = ref([]);
const total = ref(0)
const paging = ref({
    // 页码
    pageNum: 1,
    // 分页数量
    pageSize: PageEnum.SIZE,
    isAsc: 'ascending',
    orderByColumn: 'sendPoliceTypeName'
})
const defaultSort = ref({prop: 'sendPoliceTypeName', order: 'descending'});
const sortOrders = reactive(['descending', 'ascending'])

onMounted(() => {
    getTableData()
})
// 斑马纹样式函数
const tableRowStyle = ({ row, rowIndex }) => {
    if (rowIndex % 2 === 0) {
        return { backgroundColor: '#e6ecff' }; // 偶数行背景色
    }
    return {}; // 奇数行默认透明
}
/** 排序触发事件 */
const handleSortChange = (column, prop, order) => {
    paging.value.orderByColumn = column.prop;
    paging.value.isAsc = column.order;
    getTableData();
}

const getTableData = async () => {
    loading.value = true;
    const res = await getMyWorkList(queryParams.value, paging.value)
    total.value = res.total;
    tableData.value = res.rows
    loading.value = false;

}

// 改变时间
const changeDateTimerHandle = (date) => {
    if (date) {
        queryParams.value.params.beginTime = date[0];
        queryParams.value.params.endTime = date[1];
    } else {
        queryParams.value.params.beginTime = '';
        queryParams.value.params.endTime = '';
    }

    getTableData()
}

const changeSendPoliceTimerHandle = (date) => {
    if (date) {
        queryParams.value.params.sendPoliceBeginTime = date[0];
        queryParams.value.params.sendPoliceEndTime = date[1];
    } else {
        queryParams.value.params.sendPoliceBeginTime = '';
        queryParams.value.params.sendPoliceEndTime = '';
    }

    getTableData()
}

// 重置搜索
const resetQueryParamsHandle = async (elForm) => {
    if (!elForm) return
    elForm.resetFields()
    searchTime.value = []
    sendPoliceTime.value = []
    queryParams.value.params.beginTime = '';
    queryParams.value.params.endTime = '';
    queryParams.value.params.sendPoliceBeginTime = '';
    queryParams.value.params.sendPoliceEndTime = '';
    tableDataRef.value.sort(defaultSort.value.prop, defaultSort.value.order);
    await getTableData()
}
</script>

<style lang="scss" scoped>
/* 保留斑马纹的同时添加悬停效果 */
:deep().el-table--striped .el-table__body tr.el-table__row--striped:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}

:deep().el-table__body tr:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}

</style>